<template>
  <!-- 充值卡详情 -->
  <el-drawer
    title="充值卡详情"
    :visible.sync="visible"
    width="70%"
    min-width="1024px"
    class="cradInfo"
    append-to-body
    @close="reset"
  >
    <!-- <div class="item">
      <div class="title">
        <span class="title-icon" />
        <span class="title-text">卡信息</span>
      </div>
      <el-descriptions size="medium">
        <el-descriptions-item label="客户编号">{{ csmInfo.csmCode }}</el-descriptions-item>
        <el-descriptions-item label="客户名称">{{ csmInfo.csmName }}</el-descriptions-item>
        <el-descriptions-item label="绑定手机号">{{ csmInfo.csmPhone }}</el-descriptions-item>
        <el-descriptions-item label="卡号">{{ csmInfo.cardCode }}</el-descriptions-item>
        <el-descriptions-item label="开卡日期">{{ csmInfo.startDt ? parseTime(csmInfo.startDt, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
        <el-descriptions-item label="卡余额">{{ numberFormat1(csmInfo.cardSurplus) }}</el-descriptions-item>
        <el-descriptions-item label="现金卡值">{{ numberFormat1(csmInfo.cashMoney) }}</el-descriptions-item>
        <el-descriptions-item label="赠送卡值">{{ numberFormat1(csmInfo.sendMoney) }}</el-descriptions-item>
        <el-descriptions-item label="最后交易时间">{{ csmInfo.lastPayTime ? parseTime(csmInfo.lastPayTime, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
        <el-descriptions-item label="储值累计">{{ numberFormat1(csmInfo.totalCardMoney) }}</el-descriptions-item>
        <el-descriptions-item label="消费累计">{{ numberFormat1(csmInfo.totalPayMoney) }}</el-descriptions-item>
        <el-descriptions-item label="消费次数">{{ csmInfo.totalPayCount }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="item">
      <div class="title">
        <span class="title-icon" />
        <span class="title-text">其他信息</span>
      </div>
    </div> -->
    <div class="item">
      <el-tabs v-model="activeName" style="min-height: 100px;" @tab-click="tabsClick">
        <el-tab-pane lazy label="卡信息" name="detail">
          <h4 class="subTitle">卡信息</h4>
          <el-descriptions size="medium">
            <el-descriptions-item label="客户编号/组号">{{ csmInfo.csmCode }}</el-descriptions-item>
            <el-descriptions-item label="客户名称/组名称">{{ csmInfo.csmName }}</el-descriptions-item>
            <el-descriptions-item label="绑定手机号">{{ csmInfo.csmPhone }}</el-descriptions-item>
            <el-descriptions-item label="卡号">{{ csmInfo.cardCode }}</el-descriptions-item>
            <el-descriptions-item label="开卡日期">{{ csmInfo.startDt ? parseTime(csmInfo.startDt, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
            <el-descriptions-item label="卡余额">{{ numberFormat1(csmInfo.cardSurplus) }}</el-descriptions-item>
            <el-descriptions-item label="现金卡值">{{ numberFormat1(csmInfo.cashMoney) }}</el-descriptions-item>
            <el-descriptions-item label="赠送卡值">{{ numberFormat1(csmInfo.sendMoney) }}</el-descriptions-item>
            <el-descriptions-item label="最后交易时间">{{ csmInfo.lastPayTime ? parseTime(csmInfo.lastPayTime, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
            <el-descriptions-item label="储值累计">{{ numberFormat1(csmInfo.totalCardMoney) }}</el-descriptions-item>
            <el-descriptions-item label="消费累计">{{ numberFormat1(csmInfo.totalPayMoney) }}</el-descriptions-item>
            <el-descriptions-item label="消费次数">{{ csmInfo.totalPayCount }}</el-descriptions-item>
            <el-descriptions-item label="使用门店">{{ csmInfo.useOrgName }}</el-descriptions-item>
            <el-descriptions-item label="信用额度">{{ numberFormat1(csmInfo.cardFreeMoney) }}</el-descriptions-item>
          </el-descriptions>
          <h4 class="subTitle">自动充值</h4>
          <el-descriptions size="medium">
            <el-descriptions-item label="企业名称">{{ csmInfo.companyName }}</el-descriptions-item>
            <el-descriptions-item label="开户银行">{{ csmInfo.bankName }}</el-descriptions-item>
            <el-descriptions-item label="账户号码">{{ csmInfo.bankAccount }}</el-descriptions-item>
            <el-descriptions-item label="备用字段">{{ csmInfo.backup }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane lazy label="交易明细" name="info">
          <div class="head">
            <el-table-form ref="form">
              <el-form-item label="交易日期:" :table-form-merge="2">
                <el-date-picker
                  v-model="date"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  unlink-panels
                />
              </el-form-item>
              <el-form-item label="交易类型:">
                <el-select
                  v-model="query.optFlag"
                  multiple
                  collapse-tags
                  clearable
                >
                  <el-option
                    v-for="i in dealMap"
                    :key="i.value"
                    :label="i.desc"
                    :value="i.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="使用门店:">
                <el-tree-select
                  v-model="query.useOrgId"
                  clearable
                  class="tree-select"
                  :popover-width="360"
                  :select-params="{
                    clearable: false,
                    placeholder: '请选择使用门店',
                  }"
                  :tree-params=" {
                    'expand-on-click-node': false,
                    'highlight-current': true,
                    props:{
                      value:'orgId',
                      label: 'orgName',
                      disabled: 'disabled',
                    },
                    data: treeData
                  }"
                />
              </el-form-item>
              <template v-slot:btns>
                <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
              </template>
            </el-table-form>
            <el-popover
              placement="left"
              width="400"
              trigger="hover"
            >
              <div
                style="display: flex; gap: 16px; flex-direction: column;"
              >
                <div>
                  <div class="desc-title">作用</div>
                  <div>统计时间段周期该用户充值卡的交易明细</div>
                </div>
                <div>
                  <div class="desc-title">个别字段释义</div>
                  <div class="desc-row">
                    <span class="blue">【交易类型】</span>
                    <span>:</span>
                    <p>
                      <span>（1）充值划拨：当主卡进行充值划拨时，是把钱划拨给副卡，是支出，属于拨出，此时本次交易数据为负数；对于副卡来说，进行充值划拨时，是收入，属于拨入，此时本次交易数据为正数；</span>
                      <span>（2）换门店划拨：当用户要更换使用门店时，需要把老门店的余额全部转移到新门店里面去。对于老门店来说，进行换门店划拨时，是把钱划拨给新门店，是支出，属于拨出，此时本次交易数据为负数；对于新门店来说，进行换门店划拨时，是收入，属于拨入，此时本次交易数据为正数；</span>
                      <span>（3）退残充值：当进行退残业务时，对于充值卡来说，只会进账，因此全部是正数。</span>
                    </p>
                  </div>
                  <div class="desc-row">
                    <span class="blue">【使用门店】</span>
                    <span>:</span>
                    <p>
                      <span>充值卡设置的使用门店</span>
                    </p>
                  </div>
                  <div class="desc-row">
                    <span class="blue">【关联单号】</span>
                    <span>:</span>
                    <p>
                      <span>交易类型为消费时，关联单号为订单查询中对应的订单号；</span>
                      <span>交易类型为退款时，关联单号为订单查询中对应的订单号；</span>
                      <span>交易类型为退残充值时，关联单号为回收单中对应的单据号；</span>
                    </p>
                  </div>
                </div>
              </div>
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </div>
          <!-- height="300"  -->
          <iframe :src="iframeUrl" width="100%" height="300" frameborder="0" scrolling="auto" />
        </el-tab-pane>
        <el-tab-pane lazy label="卡日志" name="cradLog">
          <lb-table
            ref="lbTable"
            v-loading="$loadingPlugin.fetchData"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="column"
            :data="tableData.data"
            pagination
            :immediate-fetch="false"
            :total="tableData.total"
            custom-column
            @fetch="fetchData"
            @expand-change="clickExpand"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">关闭</el-button>
    </div>
  </el-drawer>
</template>

<script>
  import { topUpAdministrationInfoStatement, topUpAdministrationInfoQuery } from '@/api'
  import { parseTime, formatColumnMap } from '@/utils'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { queryMap } from '@/api'

  export default {
    name: 'crad-info',
    components: {
    },
    props: {
      dealMap: {
        type: Array,
        required: true
      },
      treeData: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        expandData: {},
        parseTime,
        visible: false,
        activeName: 'info',
        iframeUrl: null,
        date: [],
        query: {
          cardCode: '',
          optFlag: [],
          useOrgId: ''
        },
        csmInfo: {},
        statusMap: {}, // 状态枚举
        tableData: {
          total: 0,
          data: []
        },
        cradList: [
        ],
        // 充值
        cols1: [
          {
            prop: 'feeCount1',
            label: '本次充值金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '本次充值赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '本次充值前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '本次充值后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '充值备注'
          }
        ],
        // 消费
        cols2: [
          {
            prop: 'feeCount1',
            label: '本次消费金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '本次消费赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '本次消费前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '本次消费后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '消费备注'
          }
        ],
        // 销卡
        cols3: [
          {
            prop: 'feeCount1',
            label: '销卡退款金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount3',
            label: '销卡前卡余额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '销卡后卡金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '销卡退款备注'
          }
        ],
        // 换卡
        cols5: [
          // {
          //   prop: 'feeCount',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.feeCount && this.numberFormat1(row.feeCount) }</span>
          // },
          // {
          //   prop: 'sendCount3',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.sendCount3 && this.numberFormat1(row.sendCount3) }</span>
          // },
          // {
          //   prop: 'cashCount3',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.cashCount3 && this.numberFormat1(row.cashCount3) }</span>
          // },
          // {
          //   prop: 'feeCount4',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          // },
          {
            prop: 'remark',
            label: '换卡'
          }
        ],
        // 充值调账
        cols13: [
          {
            prop: 'feeCount1',
            label: '充值调账现金金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '充值调账赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '充值调账前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '充值调账后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '充值调账备注'
          }
        ],
        // 消费调账
        cols14: [
          {
            prop: 'feeCount1',
            label: '消费调账现金金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '消费调账赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '消费调账前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '消费调账后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '消费调账备注'
          }
        ],
        // 退款
        cols16: [
          {
            prop: 'feeCount',
            label: '退款',
            render: (h, { row }) => <span>{ row.feeCount && this.numberFormat1(row.feeCount) }</span>
          },
          {
            prop: 'sendCount3',
            label: '退款',
            render: (h, { row }) => <span>{ row.sendCount3 && this.numberFormat1(row.sendCount3) }</span>
          },
          {
            prop: 'cashCount3',
            label: '退款',
            render: (h, { row }) => <span>{ row.cashCount3 && this.numberFormat1(row.cashCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '退款',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '退款'
          }
        ]
      }
    },
    computed: {
      column: function() {
        return [
          {
            type: 'expand',
            render: (h, { row }) => {
              return (
                  <div class='expand-content'>
                    {this.expandData && (
                     <div class='font-weight title'>{this.expandData[row.recordId].title}</div>
                    )}
                    {row.optFlag === 1 &&
                    <ul style='padding: 0px'>
                    <li class='liItem'>本次充值金额：{row.feeCount1 * 1.00 / 100}元</li>
                    <li class='liItem'>本次充值赠送金额：{row.feeCount2 * 1.00 / 100}元</li>
                    <li class='liItem'>本次充值前金额：{row.feeCount3 * 1.00 / 100}元</li>
                    <li class='liItem'>本次充值后金额：{row.feeCount4 * 1.00 / 100}元</li>
                    <li class='liItem'>充值备注：{row.remark}</li>
                  </ul>}
                   {row.optFlag === 2 &&
                    <ul style='padding: 0px'>
                    <li class='liItem'>本次消费金额：{(row.feeCount * 1.00 / 100) + (row.feeCount7 * 1.00 / 100)}元</li>
                    <li class='liItem'>本次消费赠送金额：{(row.feeCount2 * 1.00 / 100) + (row.feeCount8 * 1.00 / 100)}元</li>
                    <li class='liItem'>本次消费前金额：{(row.feeCount3 * 1.00 / 100) + (row.feeCount7 * 1.00 / 100)}元</li>
                    <li class='liItem'>本次消费后金额：{row.feeCount4 * 1.00 / 100}元</li>
                    <li class='liItem'>消费备注：{row.remark}</li>
                  </ul>}
                     {row.optFlag === 3 &&
                    <ul style='padding: 0px'>
                    <li class='liItem'>销卡退款金额：{row.feeCount * 1.00 / 100}元</li>
                    <li class='liItem'>销卡前卡余额：{row.feeCount3 * 1.00 / 100}元</li>
                    <li class='liItem'>销卡后卡金额：{row.feeCount4 * 1.00 / 100}元</li>
                    <li class='liItem'>销卡退款备注：{row.remark}</li>
                  </ul>}
                   {row.optFlag === 4 &&
                    <ul style='padding: 0px'>
                      <li class='liItem'>退款金额：{row.feeCount * 1.00 / 100}元</li>
                      <li class='liItem'>退款前卡余额：{row.feeCount3 * 1.00 / 100}元</li>
                      <li class='liItem'>退款后卡金额：{row.feeCount4 * 1.00 / 100}元</li>
                      <li class='liItem'>退款备注：{row.remark}</li>
                    </ul>}
                     {row.optFlag === 5 &&
                    <ul style='padding: 0px'>
                      <li class='liItem'>换卡备注：{row.remark}</li>
                    </ul>}
                    {row.optFlag === 6 &&
                   <ul style='padding: 0px'>
                    <li class='liItem'>变更过户备注：{row.remark}</li>
                    </ul>}
                       {row.optFlag === 7 &&
                  <ul style='padding: 0px'>
                    <li class='liItem'>冻结备注：{row.remark}</li>
                  </ul>}
                       {row.optFlag === 8 &&
                  <ul style='padding: 0px'>
						<li class='liItem'>恢复备注：{row.remark}</li>
					</ul>}
                  {row.optFlag === 9 &&
                <ul style='padding: 0px'>
						<li class='liItem'>恢复备注：{row.remark}</li>
					</ul>}
                  {row.optFlag === 10 &&
                  <ul style='padding: 0px'>
						<li class='liItem'>手机号变更备注：{row.remark}</li>
					</ul>}
                  {row.optFlag === 11 &&
                <ul style='padding: 0px'>
						<li class='liItem'>卡密码修改备注：{row.remark}</li>
					</ul>}
          {row.optFlag === 12 &&
                <ul style='padding: 0px'>
						<li class='liItem'>卡密码重置备注：{row.remark}</li>
					</ul>}
         {row.optFlag === 13 &&
          <ul style='padding: 0px'>
						<li class='liItem'>充值调账现金金额：{row.feeCount1 * 1.00 / 100}元</li>
						<li class='liItem'>充值调账赠送金额：{row.feeCount2 * 1.00 / 100}元</li>
						<li class='liItem'>充值调账前金额：{row.feeCount3 * 1.00 / 100}元</li>
						<li class='liItem'>充值调账后金额：{row.feeCount4 * 1.00 / 100}元</li>
						<li class='liItem'>充值调账备注：{row.remark}</li>
					</ul>}
         {row.optFlag === 14 &&
                 <ul style='padding: 0px'>
						<li class='liItem'>消费调账现金金额：{row.feeCount1 * 1.00 / 100}元</li>
						<li class='liItem'>消费调账赠送金额：{row.feeCount2 * 1.00 / 100}元</li>
						<li class='liItem'>消费调账前金额：{row.feeCount3 * 1.00 / 100}元</li>
						<li class='liItem'>消费调账后金额：{row.feeCount4 * 1.00 / 100}元</li>
						<li class='liItem'>消费调账备注：{row.remark}</li>
					</ul>}
             {row.optFlag === 16 &&
              <ul style='padding: 0px'>
                <li class='liItem'>退款现金金额：{row.feeCount1 * 1.00 / 100}元</li>
                <li class='liItem'>退款赠送金额：{row.feeCount2 * 1.00 / 100}元</li>
                <li class='liItem'>退款前金额：{row.feeCount3 * 1.00 / 100}元</li>
                <li class='liItem'>退款后金额：{row.feeCount4 * 1.00 / 100}元</li>
                <li class='liItem'>退款备注：{row.remark}</li>
              </ul>}
             {row.optFlag === 17 &&
              <ul style='padding: 0px'>
                <li class='liItem'>本次充值金额：{row.feeCount1 * 1.00 / 100}元</li>
                <li class='liItem'>本次充值赠送金额：{row.feeCount2 * 1.00 / 100}元</li>
                <li class='liItem'>本次充值前金额：{row.feeCount3 * 1.00 / 100}元</li>
                <li class='liItem'>本次充值后金额：{row.feeCount4 * 1.00 / 100}元</li>
                <li class='liItem'>充值备注：自动充值</li>
              </ul>}
             {row.optFlag === 18 &&
              <ul style='padding: 0px'>
                <li class='liItem'>本次充值金额：{row.feeCount1 * 1.00 / 100}元</li>
                <li class='liItem'>本次充值赠送金额：{row.feeCount2 * 1.00 / 100}元</li>
                <li class='liItem'>本次充值前金额：{row.feeCount3 * 1.00 / 100}元</li>
                <li class='liItem'>本次充值后金额：{row.feeCount4 * 1.00 / 100}元</li>
                <li class='liItem'>充值备注：退残充值</li>
              </ul>}
                 {row.optFlag === 19 &&
              <ul style='padding: 0px'>
                {
                 row.useOrgName && row.useAfterOrgName &&
                 <li class='liItem'>修改前使用门店：{row.useOrgName }</li>
                }
                 {
                 row.useOrgName && row.useAfterOrgName &&
                 <li class='liItem'>修改后使用门店：{row.useAfterOrgName }</li>
                }
                <li class='liItem'>修改前信用额度：{row.feeCount5 * 1.00 / 100}元</li>
                <li class='liItem'>修改后信用额度：{row.feeCount6 * 1.00 / 100}元</li>
              </ul>}
                {row.optFlag === 20 &&
               <ul style='padding: 0px'>
                <li class='liItem'>使用门店：{row.useOrgName}</li>
                <li class='liItem'>信用额度：{row.feeCount5 * 1.00 / 100}元</li>
              </ul>}
                  {row.optFlag === 21 &&
               <ul style='padding: 0px'>
                <li class='liItem'>本次充值划拨：{row.feeCount * 1.00 / 100}元</li>
                <li class='liItem'>本次充值划拨赠送金额：{row.feeCount2 * 1.00 / 100}元</li>
                <li class='liItem'>本次充值划拨前金额：{row.feeCount3 * 1.00 / 100}元</li>
                <li class='liItem'>本次充值划拨后金额：{row.feeCount4 * 1.00 / 100}元</li>
                <li class='liItem'>充值划拨备注：{row.remark}</li>
              </ul>}
                  {row.optFlag === 22 &&
               <ul style='padding: 0px'>
                <li class='liItem'>本次换门店划拨卡余额：{row.feeCount * 1.00 / 100}元</li>
                <li class='liItem'>本次换门店划拨现金卡值：{row.feeCount1 * 1.00 / 100}元</li>
                <li class='liItem'>本次换门店划拨赠送卡值：{row.feeCount2 * 1.00 / 100}元</li>
                <li class='liItem'>本次换门店划拨前卡余额：{row.feeCount3 * 1.00 / 100}元</li>
                <li class='liItem'>本次换门店划拨前现金卡值：{row.cashCount3 * 1.00 / 100}元</li>
                <li class='liItem'>本次换门店划拨前赠送卡值：{row.sendCount3 * 1.00 / 100}元</li>
                <li class='liItem'>本次换门店划拨后卡余额：{row.feeCount4 * 1.00 / 100}元</li>
                <li class='liItem'>本次换门店划拨后现金卡值：{row.cashCount4 * 1.00 / 100}元</li>
                <li class='liItem'>本次换门店划拨后赠送卡值：{row.sendCount4 * 1.00 / 100}元</li>
                <li class='liItem'>换门店划拨备注：{row.remark}</li>
              </ul>}
                {row.optFlag === 23 &&
               <ul style='padding: 0px'>
                <li class='liItem'>本次充值划拨：{row.feeCount > 0 ? '-' : ''}{row.feeCount * 1.00 / 100}元</li>
                <li class='liItem'>本次充值划拨赠送金额：{row.feeCount2 > 0 ? '-' : ''}{row.feeCount2 * 1.00 / 100}元</li>
                <li class='liItem'>本次充值划拨前金额：{row.feeCount3 * 1.00 / 100}元</li>
                <li class='liItem'>本次充值划拨后金额：{row.feeCount4 * 1.00 / 100}元</li>
                <li class='liItem'>充值划拨备注：{row.remark}</li>
              </ul>}
                  </div>
                )
            }
          },
          {
            prop: 'createTime',
            label: '时间',
            render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
          },
          {
            prop: 'optFlag',
            label: '类型',
            render: (h, { row }) => <span>{ row.optFlag && formatColumnMap(this.cradList, 'value', row.optFlag, 'desc') }</span>
          },
          {
            prop: 'operatorName',
            label: '操作员'
          },
          {
            prop: 'orgName',
            label: '操作机构'
          }
        ]
      }
    },
    created() {},
    methods: {
      async open(temp) {
        const [res1] = await Promise.all([mergeAsyncFunc(queryMap, { enumName: 'AccCsmcardRecordOptFlag' })])
        this.cradList = res1.data
        this.query.cardCode = temp.cardCode
        await Promise.all([this.search()])
        return new Promise(resolve => {
          if (temp) {
            this.csmInfo = temp
            this.resolve = resolve
            this.visible = true
          }
        })
      },
      // 展开行
      clickExpand(row, expandedRows) {
        if (expandedRows.length > 0) {
          const item = expandedRows.find(item => item.recordId === row.recordId)
          if (item) {
            const obj = {}
            switch (item.optFlag) {
            case 1:
              obj.title = '充值卡余额充值'
              break
            case 2:
              obj.title = '充值卡余额消费'
              break
            case 3:
              obj.title = '充值卡销卡退款'
              break
            case 4:
              obj.title = '充值卡销卡退款注销'
              break
            case 5:
              obj.title = '充值卡换卡'
              break
            case 6:
              obj.title = '充值卡销卡变更过户'
              break
            case 7:
              obj.title = '充值卡冻结'
              break
            case 8:
              obj.title = '充值卡恢复'
              break
            case 9:
              obj.title = '充值卡挂失补卡'
              break
            case 10:
              obj.title = '充值卡手机号变更'
              break
            case 11:
              obj.title = '充值卡卡密码修改'
              break
            case 12:
              obj.title = '充值卡卡密码重置'
              break
            case 13:
              obj.title = '充值卡充值调账'
              break
            case 14:
              obj.title = '充值卡消费调账'
              break
            case 16:
              obj.title = '充值卡退款'
              break
            case 19:
              obj.title = '充值卡信息修改'
              break
            case 20:
              obj.title = '充值卡开卡'
              break
            case 21:
              obj.title = '充值划拨'
              break
            case 22:
              obj.title = '换门店划拨'
              break
            case 23:
              obj.title = '充值划拨'
              break
            }
            this.$set(this.expandData, item.recordId, [])
            this.$set(this.expandData[item.recordId], 'title', obj.title)
          }
        }
      },
      tabsClick(val) {
        if (val.paneName === 'cradLog') {
          this.$nextTick(() => {
            this.$refs.lbTable.fetch()
          })
        }
      },
      // 查询
      async search() {
        const params = {
          ...this.query
        }
        if (this.date && this.date.length === 2) {
          params.startTime = parseTime(this.date[0], '{y}-{m}-{d} {h}:{i}:{s}')
          params.endTime = parseTime(this.date[1], '{y}-{m}-{d} {h}:{i}:{s}')
        } else {
          params.startTime = ''
          params.endTime = ''
        }
        if (this.query.optFlag && this.query.optFlag.length > 0) {
          params.optFlag = this.query.optFlag.join(',')
        } else {
          params.optFlag = ''
        }
        const res = await topUpAdministrationInfoStatement(params)
        this.iframeUrl = res.data
      },
      reset() {
        this.csmInfo = {}
        this.date = []
        this.tableData = {
          total: 0,
          data: []
        }
        this.activeName = 'info'
        this.query = {
          cardCode: '',
          optFlag: []
        }
        this.visible = false
      },
      async fetchData({ currentPage, pageSize }) {
        const res = await topUpAdministrationInfoQuery({
          qtype: 'cardCode',
          param: this.query.cardCode,
          pageIndex: currentPage,
          pageSize
        })
        res.data.rows.map(item => {
          return item.detailList = [item]
        })
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 充值金额
      numberFormat1: function(val) {
        val = val * 1.00 / 100
        val = Number(val)
        val = isNaN(val) ? '0.00' : val.toFixed(2)
        return val + '元'
      }
    }
  }
</script>

<style lang="scss" scoped>
.cradInfo {
  /deep/.el-drawer {
    width: 68% !important;
    padding: 15px 20px;
  }
}
.item {
  margin-bottom: 10px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}
/deep/.expand-content {
  padding: 8px 20px;
  .title {
    margin-bottom: 6px;
  }
  .liItem {
    line-height: 30px;
  }
}
.subTitle {
  margin: 0 0 16px 0;
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  font-size: 14px;
  font-weight: 700;
  color: #01999f;
}
.head {
  position: relative;
  padding-right: 20px;
  .el-icon-question {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
  }
}

.blue {
  min-width: 86px;
  color: #1A23DD;
}
.desc-title {
  margin-bottom: 5px;
  font-weight: 600;
}
.desc-row {
  display: flex;
  margin-bottom: 5px;
  span {
    display: block;
  }
}

</style>
